<template>
    <div id="cesiumContainer"></div>

    <div id="infoBox" style="display: flex; justify-content: space-around; font-size: 14px;">
        <p>鼠标经度: <span id="longitude">N/A</span></p>
        <p>鼠标纬度: <span id="latitude">N/A</span></p>
        <p>相机Heading: <span id="heading">N/A</span></p>
        <p>相机Pitch: <span id="pitch">N/A</span></p>
        <p>相机Roll: <span id="roll">N/A</span></p>
        <div>相机高度: <span id="cameraHeight">N/A</span></div>
    </div>

</template>

<script setup lang='ts'>
     
import * as Cesium from "cesium";
import { onMounted } from "vue";
import axios from "axios";

import { CesiumViewer } from '../scripts/cesiumConfig.ts';
import { gdImageryLayer,LocalTerrainServer } from '../scripts/mapLoader.ts';
import { wuhanBaimo } from '../scripts/3dtilesLoader.ts';
import { proj4548ToProj4326 } from '../scripts/corrdinateProj.ts';

import { LoadDEMMain,LoadDEMMain2,flyToAimPosition } from '../scripts/loadImgDem';
// import { TerrainExcavation } from '../scripts/terrianExcavate.ts';


let viewer:Cesium.Viewer;
let scene:Cesium.Scene;

onMounted(async () => {

// NOTE:Cesium离线运行

viewer = CesiumViewer("cesiumContainer");
// console.log("viewer:",viewer);
scene = viewer.scene;

const infoBox = document.getElementById('infoBox');
const longitudeSpan = document.getElementById('longitude');
const latitudeSpan = document.getElementById('latitude');
const headingSpan = document.getElementById('heading');
const pitchSpan = document.getElementById('pitch');
const rollSpan = document.getElementById('roll');
const heightSpan = document.getElementById('cameraHeight');

// 鼠标移动监听
const handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
handler.setInputAction((movement) => {
  const cartesian = viewer.scene.pickPosition(movement.endPosition);
  if (cartesian) {
      const cartographic = Cesium.Cartographic.fromCartesian(cartesian);
      const longitude = Cesium.Math.toDegrees(cartographic.longitude).toFixed(6);
      const latitude = Cesium.Math.toDegrees(cartographic.latitude).toFixed(6);

      longitudeSpan.innerText = longitude;
      latitudeSpan.innerText = latitude;
  } else {
      longitudeSpan.innerText = 'N/A';
      latitudeSpan.innerText = 'N/A';
  }
}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

// 相机变化监听
viewer.scene.postRender.addEventListener(() => {
  const camera = viewer.camera;

  const heading = Cesium.Math.toDegrees(camera.heading).toFixed(2);
  const pitch = Cesium.Math.toDegrees(camera.pitch).toFixed(2);
  const roll = Cesium.Math.toDegrees(camera.roll).toFixed(2);

  headingSpan.innerText = heading;
  pitchSpan.innerText = pitch;
  rollSpan.innerText = roll;

  const cameraPosition = viewer.camera.positionCartographic;
  const cameraHeight = cameraPosition.height.toFixed(2); // 相机高度（米）
  // 在页面中显示相机高度
  heightSpan.innerText = cameraHeight;
  
});

// 加载本地地形数据--洪湖dem，范围很小
const localTerrainServerURL = ' http://127.0.0.1:8080/';
viewer.scene.setTerrain(LocalTerrainServer(localTerrainServerURL));

// 控制地形数据的请求频率和质量
viewer.scene.globe.maximumScreenSpaceError = 0.2;

// 地形夸张
viewer.scene.globe.terrainExaggeration = 100.0;

// NOTE:避免某些情况下 viewer.entities 可能被地形遮挡
// viewer.scene.globe.depthTestAgainstTerrain = false;


// // 加载高德地图
const gdImageryProvider = gdImageryLayer();
viewer.imageryLayers.addImageryProvider(gdImageryProvider);



// 武汉市白模
// const baimo = wuhanBaimo();
// viewer.scene.primitives.add(baimo);


// 在此处添加你的代码


flyToAimPosition(viewer);

// LoadDEMMain(viewer);
LoadDEMMain2(viewer);

// TerrainExcavation(viewer);




});


</script>

<style scoped>
#cesiumContainer{ 
  width: 100%;
  height: 100vh; 
  padding: 0;
  margin: 0;
  overflow:
  hidden;
}
#infoBox{
  position: fixed; 
  bottom: 0; 
  left: 0; 
  width: 100%; 
  background: rgba(42, 42, 42, 0.8); 
  color: white; 
  padding: 10px; 
  border-top: 2px solid #fff; 
  font-family: Arial, sans-serif; 
  z-index: 1000; 
  box-sizing: border-box;
}
</style>